<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    
    <div id="app">
        <zoe v-for="item in items"
         v-bind:zoe="item">2333</zoe>
        <count></count>
        <count></count>
        <count></count>
    </div>

    <script>

        Vue.component("zoe",{
            // 组件需要使用props来获取外部的值
            props:["zoe"],
            template:'<li>{{zoe}}</li>'
            
        });

        Vue.component("count",{
            // 组件的data必须是一个函数，因此每一个实例可以有一套返回对象独立的拷贝
            data:function(){
                return {
                    count : 0
                }
            },
            template:'<button @click="count++">点击了{{count}}次按钮</button>'
        });

        var vue = new Vue({
            el:"#app",
            data:{
                "items":["数据","模型","视图"]
            }
        });



    </script>
    
</body>
</html>